標籤簡介
在HTML中標籤<a></a> 或者大寫字母A 。其中的a(或者 A) 是 anchor 的縮寫 。anchor ['æŋkə] 基本解釋是.:錨, 鐵錨 的。
這些標籤的作用是標明超連線的起始位置或目的位置。
<a> 標籤可定義錨。錨 (anchor) 有兩種用法:
通過使用 href 屬性,創建指向另外一個文檔的連結(或超連結)通過使用 name 或 id 屬性,創建一個文檔內部的書籤(也就是說,可以創建指向文檔片段的連結)<a> 元素最重要的屬性是 href 屬性,它指定連結的目標。
在所有瀏覽器中,連結的默認外觀是:
未被訪問的連結帶有下劃線而且是藍色的已被訪問的連結帶有下劃線而且是紫色的活動連結帶有下劃線而且是紅色的
示例:
1. <a href="#">關鍵字</a>
2. <a name="a00">關鍵字</a>
可選屬性
#:HTML5 中的新屬性。
屬性 | 值 | 描述 |
charset | char_encoding | HTML5 不支持。規定目標 URL 的字元編碼。 |
coords | coordinates | HTML5 不支持。規定連結的坐標。 |
download(#) () | filename | 指定下載連結 |
href | URL | 規定連結的目標 URL。 |
hreflang | language_code | 規定目標 URL 的基準語言。僅在 href 屬性存在時使用。 |
media(#) | media_query | 規定目標 URL 的媒介類型。默認值:all。僅在 href 屬性存在時使用。 |
name | section_name | HTML5 不支持。規定錨的名稱。 |
rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | 規定當前文檔與目標 URL 之間的關係。僅在 href 屬性存在時使用。 |
rev | text | HTML5 不支持。規定目標 URL 與當前文檔之間的關係。 |
shape | default rect circle poly | HTML5 不支持。規定連結的形狀。 |
target | _blank _parent _self _top ename | 規定在何處打開目標 URL。僅在 href 屬性存在時使用。 |
type (#) | MIME_type | 規定目標 URL 的 MIME 類型。僅在 href 屬性存在時使用。 註:MIME = Multipurpose Internet Mail Extensions。 |
語法
連結的 HTML 代碼很簡單。它類似這樣:
<a href="url">Link text</a>href 屬性規定連結的目標。
開始標籤和結束標籤之間的文字被作為超級連結來顯示。
實例<a href="url/">Visit W3School</a>上面這行代碼顯示為:Visit W3School
點擊這個超連結會把用戶帶到 W3School 的首頁。
提示:"連結文本" 不必一定是文本。圖片或其他 HTML 元素都可以成為連結。
HTML 連結 - target 屬性使用 Target 屬性,你可以定義被連結的文檔在何處顯示。
下面的這行會在新視窗打開文檔:
<a href="http://url/" target="_blank">Visit W3School!</a>
標準屬性
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
事件屬性
onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
標籤偽類
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00} /* 已訪問的連結 */
a:hover {color: #FF00FF} /* 當有滑鼠懸停在連結上 */
a:active {color: #0000FF} /* 被選擇的連結 */
name 屬性
name 屬性規定錨(anchor)的名稱。
name 屬性用於創建 HTML 內部的書籤。
書籤不會以任何特殊方式顯示,它對讀者是不可見的。
當使用命名錨(named anchors)時,我們可以創建直接跳至頁面中某個節的連結,這樣使用者就無需不停的滾動頁面來尋找他們需要的信息。
命名錨的語法
<a name="label">Text to be displayed</a>提示:錨的名稱可以是任何你喜歡的名字。
實例
HTML 文檔內部的已命名的錨:
<a name="tips">Useful Tips Section</a>然後,我們創建指向相同文檔中“有用的提示”部分的連結:
<a href="#tips">Visit the Useful Tips Section</a>或者,創建從另一個頁面指向該文檔中“有用的提示”部分的連結:
<a href="url/#tips">Visit the Useful Tips Section</a>在上面的代碼中,我們將 # 符號和錨名稱添加到 URL 的末端,就可以直接連結到 tips 這個命名錨了。